<template>
  <div class="emr-content-module module-familyHistory">
    <h3 id="familyHistory">过敏性疾病家族史</h3>
    <div class="content-wrapper" :class="{ locked: d.disabled }">
      <span>家族史:</span>
      <el-radio-group
        v-model="d.familyHistory.attr1"
        @change="clear(['attr2', 'attr3', 'attr4', 'attr5'])"
      >
        <el-radio :disabled="d.disabled" label="0">无</el-radio>
        <el-radio :disabled="d.disabled" label="1">有</el-radio>
      </el-radio-group>
      <span v-if="d.familyHistory.attr1 === '1'">,（家庭成员</span>
      <el-input
        v-if="d.familyHistory.attr1 === '1'"
        v-model="d.familyHistory.attr2"
        size="medium"
        :disabled="d.disabled"
        placeholder="输入成员"
        maxlength="50"
        style="width: 120px; margin-right: 5px"
      ></el-input>
      <span style="display: inline-block" v-if="d.familyHistory.attr1 === '1'">
        <el-checkbox-group v-model="d.familyHistory.attr3">
          <el-checkbox size="medium" label="哮喘史" :disabled="d.disabled">
            哮喘史
          </el-checkbox>
          <el-checkbox
            size="medium"
            label="变应性鼻炎史"
            :disabled="d.disabled"
          >
            变应性鼻炎史
          </el-checkbox>
          <el-checkbox size="medium" label="食物过敏史" :disabled="d.disabled">
            食物过敏史
          </el-checkbox>
          <el-checkbox
            size="medium"
            label="吸入性过敏原致敏史"
            :disabled="d.disabled"
          >
            吸入性过敏原致敏史
          </el-checkbox>
        </el-checkbox-group>
      </span>
      <span v-if="d.familyHistory.attr1 === '1'">过敏原:</span>
      <el-input
        v-if="d.familyHistory.attr1 === '1'"
        v-model="d.familyHistory.attr4"
        size="medium"
        :disabled="d.disabled"
        placeholder="输入过敏原"
        maxlength="50"
        style="width: 180px"
      ></el-input>
      <span v-if="d.familyHistory.attr1 === '1'">), 家庭成员是否吸烟:</span>
      <el-radio-group
        v-if="d.familyHistory.attr1 === '1'"
        v-model="d.familyHistory.attr5"
      >
        <el-radio :disabled="d.disabled" label="0">无</el-radio>
        <el-radio :disabled="d.disabled" label="1">有</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
  import { reactive, inject } from 'vue'
  export default {
    setup() {
      const initForm = function () {
        return {
          attr1: null,
          attr2: null,
          attr3: [],
          attr4: null,
          attr5: null,
        }
      }

      const clearValue = inject('clearValue')
      const clear = function (val) {
        clearValue(d.familyHistory, val)
      }
      const d = reactive({ familyHistory: initForm() })
      return {
        d,
        clear,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/emr.scss';
</style>
